import { definedColors, translateSize, themeColors } from 'styles';
import { ViewStyle, TextStyle, ImageStyle } from 'react-native';


export const container: ViewStyle = {
	position: 'absolute',
	top: 0,
	left: 0,
	bottom: 0,
	right: 0,
	height: '100%',
	overflow: 'hidden',
	backgroundColor: 'rgba(0, 0, 0, 0.3)',
}

export const innerContainer: ViewStyle = {
	backgroundColor: definedColors.white,
	width: '100%',
	height: '60%',
	padding: translateSize(42)
}

export const itemContainer: ViewStyle = {
	flexDirection: 'row',
	marginTop: translateSize(30),
	justifyContent: 'space-between',
	alignItems: 'center',
}

export const dropdownView: ViewStyle = {
	flex: 1,
	marginRight: translateSize(20)
}

export const dropdownContainer: ViewStyle = {
	borderRadius: translateSize(5),
	borderWidth: 1,
	borderColor: definedColors.grayda,
	backgroundColor: definedColors.white,
	height: translateSize(80),
	alignItems: 'center',
	justifyContent: 'center',
	flexDirection: 'row',
	width: '100%',
	paddingHorizontal: translateSize(6),
	overflow: 'hidden'
}

export const dropdownTitle: TextStyle = {
	maxWidth: '80%',
	fontSize: translateSize(28),
	color: definedColors.gray66,
	paddingRight: translateSize(6)
}

export const dropdownIcon: ImageStyle = {
	width: translateSize(50),
	height: translateSize(50),
}

export const dropdownRow: TextStyle = {
	fontSize: translateSize(28),
	paddingVertical: translateSize(18),
	paddingLeft: translateSize(10),
	color: definedColors.gray66
}

export const searchBtn: TextStyle = {
	color: definedColors.white,
	height: translateSize(80),
	width: translateSize(130),
	textAlign: 'center',
	lineHeight: translateSize(70),
	fontSize: translateSize(30),
	borderRadius: translateSize(5)
}

export const input: TextStyle = {
	borderRadius: translateSize(5),
	borderWidth: 1,
	marginRight: translateSize(30),
	borderColor: definedColors.grayda,
	paddingHorizontal: translateSize(10),
	backgroundColor: definedColors.white,
	height: translateSize(80),
	width: '45%'
}

export const content: ViewStyle = {
	flexDirection: 'column',
	paddingVertical: translateSize(10)
}

export const contentItem: ViewStyle = {
	flexDirection: 'row',
	// height: translateSize(70),
	paddingTop: translateSize(10),
	paddingBottom: translateSize(10),
	alignItems: 'center'
}

export const contentIcon: ImageStyle = {
	width: translateSize(42),
	height: translateSize(42)
}

export const contentText: TextStyle = {
	fontSize: translateSize(28),
	color: definedColors.gray66,
	marginLeft: translateSize(30)
}

export const bottomContainer: ViewStyle = {
	width: '100%',
	height: translateSize(120),
	flexDirection: 'row',
	alignItems: 'center',
	justifyContent: 'space-around'
}

export const comfirm: TextStyle = {
	height: translateSize(80),
	width: translateSize(200),
	textAlign: 'center',
	lineHeight: translateSize(80),
	fontSize: translateSize(28),
	color: definedColors.white,
	borderRadius: translateSize(5),
	backgroundColor: themeColors.primary
}

export const cancel: TextStyle = {
	height: translateSize(80),
	width: translateSize(200),
	textAlign: 'center',
	lineHeight: translateSize(80),
	fontSize: translateSize(28),
	color: definedColors.grayda,
	borderRadius: translateSize(5),
	borderWidth: 1,
	borderColor: definedColors.grayda,
	backgroundColor: definedColors.white
}